<template>
  <div class="app-container">
    <div class="filter-container">
      <span style="float:left;width:15%;">
        <el-input @input="handleFilter" v-model="listQuery.username" placeholder="登录用户账号" clearable
          class="filter-item" />
      </span>
      <span style="float:left;margin-left: 10px;">
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查询</el-button>
      </span>
    </div>

    <!-- 表格 -->
    <el-table :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%;height: 100%;">
      <el-table-column prop="username" label="用户账户" align="center" />
      <el-table-column prop="realName" label="用户名称" align="center" />
      <el-table-column prop="ip" label="登录IP" align="center" />
      <el-table-column prop="address" label="登录所在地" align="center" />
      <el-table-column prop="isp" label="运营商" align="center" />
      <el-table-column prop="userAgent" label="登录方式" align="center" />
      <el-table-column prop="loginTime" label="登录时间" align="center" />
      <el-table-column align="center" label="操作" width="200px">
        <template slot-scope="scope">
          <el-button @click="handleLogout(scope.row)" size="small" type="danger" v-waves>强退</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import {
    onlineUsers,
    forcedReturn
  } from '@/api/monitor/online'

  /* 工具 */
  import * as common from '@/utils/base/common'

  export default {
    /*  内容: 在线用户  */
    name: 'online',
    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          pageSize: 10,
          username: '',
          login_date: '',
        },
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 后台获取列表数据
      getList() {
        this.listLoading = true
        onlineUsers(this.listQuery).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          this.listLoading = false
        }).catch(err => {
          this.listLoading = false;
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      // 强退
      handleLogout(row) {
        this.$confirm('此操作将强制退出当前登录账户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          forcedReturn({id: row.id}).then(response => {
            if (response.code === 200) {
              common.message(this, 'success', 2, response.message)
              this.getList()
            } else {
              common.message(this, 'warning', 2, response.message)
            }
          }).catch(err => {
            common.message(this, 'error', 2, '强退失败!')
            console.error(err)
          })
        }).catch(() => {});
      },

      closeDialog() {
        this.showLog = false;
      },

      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      }

    } // methods end
  }
</script>

<style scoped>
  a:link {
    color: blue;
    text-decoration: none;
  }

  /*未访问：蓝色、无下划线 */

  a:active {
    color: red;
  }

  /*激活：红色 */

  a:visited {
    color: purple;
    text-decoration: none;
  }

  /*已访问：purple、无下划线 */

  a:hover {
    color: red;
    text-decoration: underline;
  }

  /*鼠标移近：红色、下划线 */

  .my-a {
    text-decoration: underline;
    color: -webkit-link;
    cursor: pointer;
  }

  @import "~@/styles/list.css";
</style>
